<template>
    <rx-dialog @ok="ok" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <div style="padding: 10px;width: 100%;height: 100%">
                    <rx-grid
                        ref="table"
                        :columns="columns"
                        url="/api-screen/screen/core/screenChartManage/query"
                        :hasPage="true"
                        field="ID_"
                        :urlConfig="urlConfig"
                        :selectConfig="selectConfig"
                        @selectMethod="selectData"
                    >
                        <template #name="{row}">
                            {{$i18(row.name)}}
                        </template>
                    </rx-grid>
                </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxGrid, RxLayout, Util,RxDialog} from '@lowcode/jpaas-base-lib';
import useMain from "../../../../stores/use-main";
import {mapState} from 'pinia';

export default {
    name: "ScreenChartManageDialog",
    components: {
        RxGrid,
        RxLayout,
        RxDialog
    },
    computed: {
        ...mapState(useMain, ["appId"])
    },
    props: {
        destroy: {
            type: Function
        },
    },
    data() {
        return {
            columns: [
                {title: this.$ti18("rxForm.name", "名称"), field: 'name',slots: {default: 'name'}},
                {title: this.$ti18('rxForm.alias', '别名'), field: 'alias'},
                {title: this.$ti18('rxForm.createTime', '创建时间'), field: 'createTime'}
            ],
            urlConfig: {
                ajaxType: 'post',//请求类型 post/get
                contentType: 'json',//类容类型
                queryParam: {},//请求参数
                //dataField,根据返回的参数来确定取哪一层的数据 如 res = { data:[] } ->  dataField:'data'
                // 如 res = { list:{data:[]} } -> dataField:'list.data' 依次类推;
                dataField: 'result.data',
                totalField:'result.totalCount'
            },
            selectConfig: {
                type: 'radio',//checkbox复选 / radio单选
                width: '60',
                trigger: 'row',//触发条件 row点击行 cell点击单元格 default点击控件本身
                checkMethod: ""
            },
            checkedData: [],
        }
    },
    created() {
        let appId = this.appId;
        if (appId) {
            this.urlConfig.queryParam.Q_APP_ID__S_EQ = appId;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "screenLang", key);
        },
        selectData(obj){
            this.checkedData=obj.row || ""
        },
        ok() {
            if(!this.checkedData){
                this.$message.error(this.i18n('form.pleaseOne','请选择至少一个'));
                return;
            }
            Util.closeWindow(this,"ok",this.checkedData)
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
    },
    watch: {},
}
</script>

<style scoped>
.table-operator {
    padding: 4px;
}

.table-operator button {
    margin: 2px;
}
</style>
